<template>
  <div class="task-feedback-detail">
    <div v-if="!customerSatisfaction">
      <div class="form-view-row">
        <label>{{$t('task.detail.components.serviceDegree')}}</label>
        <div class="form-view-row-content" v-if="evaluate.degree">
          <!-- <span :class="['evaluate-degree-img', getDegreeImg(evaluate.degree)]"></span> -->
          <i class="iconfont" :class="getDegreeImg(evaluate.degree)"></i>
          <span class="evaluate-degree-text">{{evaluate.degree}}</span>
        </div>
      </div>
      <div class="form-view-row" v-if="evaluateConfig.useStarEvaluate && starEvaluates.length">
        <label>{{$t('task.detail.components.serviceEvaluate')}}</label>
        <div class="star-evaluate-row-content">
          <div class="star-evaluate-row" v-for="(name, index) in starEvaluates" :key="index">
            <div class="star-title">{{ name }}</div>
            <base-service-star :value="getStar(index)"></base-service-star>
          </div>
        </div>
      </div>
      <div class="form-view-row" v-if="evaluateConfig.useTagEvaluate && tagEvaluates.length">
        <label>{{$t('task.detail.components.serviceTag')}}</label>
        <div class="form-view-row-content evaluate-tag">
          <span class="evaliate-tag-item evaliate-tag-active" v-for="name in tagEvaluates" :key="name">{{ name }}</span>
        </div>
      </div>
      <div class="form-view-row">
        <label>{{$t('task.customerEvaluation')}}</label>
        <div class="form-view-row-content" v-if="evaluateContent">{{ evaluateContent }}</div>
      </div>

      <template v-if="evaluate.isReview === 0">
        <div class="form-view-row" v-if="evaluate.reviewUser">
          <label>{{$t('task.detail.components.evaluatePerson')}}</label>
          
          <div class="form-view-row-content">
            <template v-if="isOpenData && evaluate.reviewUser.staffId">
              <open-data type="userName" :openid="evaluate.reviewUser.staffId"></open-data>
            </template>
            <template v-else>
              {{ evaluate.reviewUser.displayName }}
            </template>
          </div>
          
        </div>
        <div class="form-view-row" v-if="evaluate.reviewTime">
          <label>{{$t('task.detail.components.evaluateTime')}}</label>
          <div class="form-view-row-content">{{ evaluate.reviewTime | fmt_datetime }}</div>
        </div>
      </template>
    </div>
    <div v-if="customerSatisfaction" class="detail-evaluated" v-loading="showLoading">
      <iframe id="iframepage" ref="iframePage" :src="iframeUrl" height="350px" width="100%"/>
    </div>

    <div class="form-view-row">
      <label>{{$t('task.detail.components.evaluateSuggestion')}}</label>
      <div class="form-view-row-content" v-if="evaluate.suggestion">{{ evaluate.suggestion }}</div>
    </div>

    <template v-if="evaluate.isReview === 1">
      <div class="form-view-row" v-if="evaluate.reviewUser">
        <label>{{$t('task.detail.components.reviewUser')}}</label>
        
        <div class="form-view-row-content">
          <template v-if="isOpenData && evaluate.reviewUser.staffId">
            <open-data type="userName" :openid="evaluate.reviewUser.staffId"></open-data>
          </template>
          <template v-else>
            {{ evaluate.reviewUser.displayName }}
          </template>
        </div>
        
      </div>
      <div class="form-view-row" v-if="evaluate.reviewTime">
        <label>{{$t('task.detail.components.reviewTime')}}</label>
        <div class="form-view-row-content">{{ evaluate.reviewTime | fmt_datetime }}</div>
      </div>
    </template>
  </div>
</template>

<script>
import { isOpenData } from '@src/util/platform';
import { getRootWindowInitData } from '@src/util/window'
const rootWindowInitData = getRootWindowInitData()

export default {
  name: 'task-feedback-detail',
  props: {
    evaluate: {
      type: Object,
      default: () => ({})
    },
    evaluateConfig: {
      type: Object,
      default: () => ({})
    },
    evaluateContent: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // TODO 国际化待办
      degreeValueArr: ['非常满意', '满意', '一般', '不满意', '非常不满意'],
      isOpenData,
      iframeUrl: '',
      iframeUrlEdit: '',
      editEvaluedSync: false
    }
  },
  computed: {
    starEvaluates(){
      return this.evaluateConfig.starEvaluates || [];
    },
    starFeilds(){
      return this.evaluateConfig.starEvaluateFeilds || [];
    },
    tagEvaluates(){
      return this.evaluate.evaluateObj?.tagEvaluates || [];
    },
    customerSatisfaction() {
      // 展示回访问卷方案设置
      return rootWindowInitData?.customerSatisfaction
    }
  },
  methods: {
    getDegreeImg(type) {
      if (type === this.degreeValueArr[0]) return 'icon-feichangmanyi verySatisfied';
      if (type === this.degreeValueArr[1]) return 'icon-manyi satisfied';
      if (type === this.degreeValueArr[2]) return 'icon-yiban commonly';
      if (type === this.degreeValueArr[3]) return 'icon-bumanyi disSatisfied';
      if (type === this.degreeValueArr[4]) return 'icon-feichangbumanyi veryDissatisfied';
    },
    getStar(i) {
      let evaluate = this.evaluate.evaluateObj || {};
      return evaluate[this.starFeilds[i]] || 0;
    },
    sendMessage(data){
        this.$refs.iframePageEdti.contentWindow.postMessage(data, '*');
    },
  },
  mounted(){
    let that = this;
    window.addEventListener('message', function(messageEvent){
      if(messageEvent.data.judgeSatisfaction && messageEvent.data.judgeSatisfaction == 1){
        that.editEvaluedSync = true;
        that.iframeUrlEdit = "/pcoperation/task/evaluate?id=" + that.evaluate.id + "&isReviewed=" + that.evaluate.isReviewed + "&isEvaluated=" + that.evaluate.isEvaluated + "&editEvaluated=true";
      }
      if(messageEvent.data.judgeSatisfaction == 0){
        that.$confirm(this.$t('task.tip.feedbackTip1'), this.$t('task.tip.modifyTip'), {
          confirmButtonText: this.$t('common.base.makeSure'),
          cancelButtonText: this.$t('common.base.cancel'),
          type: 'warning',
        }).then(() => {
          that.editEvaluedSync = true;
          that.iframeUrlEdit = "/pcoperation/task/evaluate?id=" + that.evaluate.id + "&isReviewed=" + that.evaluate.isReviewed + "&isEvaluated=" + that.evaluate.isEvaluated + "&editEvaluated=true";
        }).catch(() => { });
      }
      if(messageEvent.data.show){
        that.editEvaluedSync = false
      }
    })
  },
  created() {
    this.iframeUrl = "/pcoperation/task/evaluate?id=" + this.evaluate.id + "&isReviewed=" + this.evaluate.isReviewed + "&isEvaluated=" + this.evaluate.isEvaluated + "&fromDetail=true";
  }
}
</script>
<style lang="scss">
.task-feedback-detail {
  .detail-evaluated{
		border: 1px solid #f4f6f7;
		border-radius: 5px;
    margin-bottom: 20px;
    padding:10px;
  }
  .icon-feichangmanyi,.icon-manyi,.icon-yiban,.icon-bumanyi,.icon-feichangbumanyi{
    color:#595959!important;
    font-size:24px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    margin-right: 2px;
    display: inline-block;
    vertical-align: middle;
  }
  .verySatisfied{
    color: #52c41a!important;
  }
  .satisfied {
    color: #26c8ff!important;
  }
  .commonly {
    color: #ffa726!important;
  }
  .disSatisfied {
    color: #ff7043!important;
  }
  .veryDissatisfied {
    color: #d9363e!important;
  }
}


</style>
